<template>
  <div ref="gantt"></div>
</template>

<script>
  import {gantt} from 'dhtmlx-gantt';
  export default {
    name: 'gantt',
    props: {
      tasks: {
        type: Object,
        default () {
          return {data: [], links: []}
        }
      }
    },

    mounted: function () {
      gantt.config.xml_date = "%Y-%m-%d";
      /** 是否可以拖拽项目排序 **/
      gantt.config.order_branch = false;
      gantt.config.order_branch_free = false;
      /** 是否可以放项目类型的项目 **/
      gantt.config.drag_project = false;
      /** 是否可以通过拖放来调整任务大小 **/
      gantt.config.drag_resize = false;
      /** 是否可以通过拖动进度旋钮来更改任务进度 **/
      gantt.config.drag_progress = false;
      /** 是否可以通过拖放移动任务 **/
      gantt.config.drag_move = false;
      /** 双击弹窗 **/
      gantt.config.details_on_dblclick = false;
      /** 列宽自适应 **/
      gantt.config.autofit = true;
      /** 左侧宽度 **/
      gantt.config.grid_width = 500;
      /** 拖拽link 显示为进度条左右侧圆点 **/
      gantt.config.drag_links = false;
      /** 甘特图列设置 add为新增按钮 **/
      gantt.config.columns=[
        {name:"text", label:"任务名称", tree:true, align: "center" },
        {name:"lv", label:"级别", align: "center" },
        {name:"change_date", label:"变更时间", align: "center" },
        {name:"start_date", label:"计划开始", align: "center" },
        {name:"end_date", label:"计划结束", align: "center" },
        // {name:"duration", label:"Duration", align: "center" },
        // {name:"add",label:""},
      ];

      /** 设置x轴的日期格式 **/
      gantt.config.scales = [
        {unit: "month", step: 1, format: "%Y-%m"},
        {unit: "day", step: 1, format: "%d"}
      ];



      gantt.init(this.$refs.gantt);
      gantt.parse(this.$props.tasks);
      /** 甘特图项目选择事件 **/
      gantt.attachEvent('onTaskSelected', (id) => {
        let task = gantt.getTask(id);
        this.$emit('task-selected', task);
      });
      gantt.attachEvent('onTaskDblClick', (id) => {
        let task = gantt.getTask(id);
        this.$emit('dblclick', task);
      });
    }
  }
</script>

<style>
  @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>
